<template>
	<view class="g-steps">
		<view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'g-steps',
		data() {
			return {
				steps: [],//子组件示例的容器
				defaultIndex:3,
			};
		},
		props: {
			space:{
				default:150
			},//每个步骤间距，单位rpx
			value:{
				type:Number,
				default:0
			},
			// stepBgColor:{
			// 	type:String
			// },
		},
		computed: {

		},
		methods: {
			test() {
				this.defaultIndex +=1
			},
			test2() {
				this.defaultIndex -=1
			},
			init(){
				//监听avtive的值并重新计算赋值子组件示例的状态
				this.steps.forEach((item, index,selfArray) => {
					//维护圆点和line的状态
					if(index<this.defaultIndex){
						item.isActive=1
						item.lineStatu = 1
					} else{
						item.isActive= 3
						item.lineStatu = 2
					}
					
				})
			}
		},
		watch:{
			value(n,o){
				if(n<0){
					//避免无限的增减
					this.defaultIndex = 0
				}else if(n>this.steps.length){
					this.defaultIndex = this.steps.length
				}else{
					this.defaultIndex = n
				}
				this.$emit("input",this.defaultIndex)
			},
			defaultIndex(n,o){
				this.init()
			}
		},
		created() {
		},
		mounted() {
			//最后一项不显示
			this.defaultIndex = this.value
			this.steps[this.steps.length - 1].isShowline = false
		}
	};
</script>
<style></style>
